<img src="/assets/images/pac.svg" alt="" *ngIf="tableLoader">

<div class="row" id="gh_{{host}}" id="main-container-game-start" *ngIf="!tableLoader">
	<div class="col-sm-3">
		<span class="user-game-name" id="gh_{{host}}_hname"><b>{{ host }}</b></span> <br>
		<div id="pl_status">
			<span id="gh_{{host}}_hstatus" class="text-center">
				<span class='msg_bgl msg_bgl_y' *ngIf="game?.accepted === 0">Hi, <BR> I am waiting your Join </span>
				<span class='msg_bgl msg_bgl_y' *ngIf="game?.ph_move_hash !== nullHash && game?.pc_move_hash === nullHash">waiting on oponent move to confirm own move...</span>
				<span class='msg_bgl msg_bgl_y' *ngIf="game?.ph_move_hash !== nullHash && game?.pc_move_hash !== nullHash && game?.ph_move === 0">Please <a class='move-two' (click)="moveSecond(game?.id, game?.challenger , 1)">confirm</a> your move...</span>
			</span>
			
			<span class='msg_bgl msg_bgl_y' [ngClass]="{ 'msg_bgl_g': game?.winner === host, 'msg_bgl_r': game?.winner !== host && game?.winner !== 'none' && game?.winner !== 'self'}" *ngIf="game?.ph_move_hash !== nullHash && game?.pc_move_hash !== nullHash && game?.ph_move !== 0">
					<span *ngIf="game?.ph_move !== game?.ph_move_nonce">
						Move confirmed: <span [innerHtml]="icons[game?.ph_move]"></span>
					</span>
					<span *ngIf="game?.ph_move === game?.ph_move_nonce">
						I was too lazy to confirm a move :)
					</span>
			</span>

			<div *ngIf="game?.ph_move_hash === nullHash">
			 	<button class="uk-button uk-button-primary marg_btm_5" [ngStyle]="config.style.ukButtonPrimary" type="button" id="btn_move1" (click)="moveFirst(game?.id, 1,  game?.challenger, 1)" >
					<span [innerHtml]="icons[1]"></span>
				</button>
				<button class="uk-button uk-button-primary marg_btm_5" [ngStyle]="config.style.ukButtonPrimary" type="button" id="btn_move1" (click)="moveFirst(game?.id, 2 , game?.challenger, 1)" >
					<span [innerHtml]="icons[2]"></span>
				</button>
				<button class="uk-button uk-button-primary marg_btm_5" [ngStyle]="config.style.ukButtonPrimary" type="button" id="btn_move1" (click)="moveFirst(game?.id, 3, game?.challenger, 1)" >
					<span [innerHtml]="icons[3]"></span>
				</button>
			</div>

		</div>
		<i class="fas fa-user-ninja user-circle-icon"></i>
		<h1 class="winner" id="winnerh_{{host}}" *ngIf="game?.winner !== 'none' && game?.winner === host">YOU WINN</h1>
		<h1 class="looser" id="looserh_{{host}}" *ngIf="game?.winner !== 'none' && game?.winner !== host && game?.winner !== 'self' ">YOU LOSE</h1>
	</div>
	<div class="col-sm-5 main-game-container">
		<br>
		<h3 class="header-history">History</h3>
		<div id="gh_{{host}}_history" class="game-history">
			<div>game owner <b>[ {{ host }} ]</b>  started game with <b>[ {{ game?.challenger }} ]</b>  </div>
			<!--<div *ngIf="game?.accepted !== 0"> <b>[ {{ game?.challenger }} ]</b> accepted.</div>-->
			<div *ngIf="game?.ph_move_hash !== nullHash"> [ {{ host }} ] sent move hash: <strong (click)="copyHash(game?.ph_move_hash)" class="hash-container"> {{ game?.ph_move_hash }} </strong> </div>
			<div *ngIf="game?.pc_move_hash !== nullHash"> [ {{ game?.challenger }} ] sent move hash: <strong (click)="copyHash(game?.pc_move_hash)" class="hash-container"> {{ game?.pc_move_hash }} </strong> </div>
			
			<div *ngIf="game?.pc_move_hash !== nullHash && game?.ph_move_hash !== nullHash && game?.pc_move !== 0 ">
				<b>[ {{ game?.challenger }} ]</b> Confirmed Move: <span [innerHtml]="icons[game?.pc_move]"></span><br> 
				<span *ngIf="game?.pc_move !== game?.pc_move_nonce">
					[move: {{ game?.pc_move }}, nonce: {{ game?.pc_move_nonce }} =  {{ game?.pc_move }} {{ game?.pc_move_nonce }} 
					<a href='https://md5calc.com/hash/sha256/{{game.pc_move}}{{game.pc_move_nonce}}' target='_blank'>check</a>]
				</span>
				<span *ngIf="game?.pc_move === game?.pc_move_nonce">
					[ Move not confirmed and time expired ]
				</span>
			</div>
			
			<div *ngIf="game?.pc_move_hash !== nullHash && game?.ph_move_hash !== nullHash && game?.ph_move !== 0 ">
				<b>[ {{ game?.host }} ]</b> Confirmed Move: <span [innerHtml]="icons[game?.ph_move]"></span><br> 
				<span *ngIf="game?.ph_move !== game?.ph_move_nonce">
					[ move: {{ game?.ph_move }}, nonce: {{ game?.ph_move_nonce }} =  {{ game?.ph_move }} {{ game?.ph_move_nonce }} 
					<a href='https://md5calc.com/hash/sha256/{{game.ph_move}}{{game.ph_move_nonce}}' target='_blank'>check</a> ]
				</span>
				<span *ngIf="game?.ph_move === game?.ph_move_nonce">
					[ Move not confirmed and time expired ]
				</span>
			</div>

		</div>
	</div>
	<div class="col-sm-3">
		<span class="user-game-name" id="gh_{{host}}_cname"><b>{{ game?.challenger }}</b></span> <br>
		<div id="pr_status">
			<span id="gh_{{host}}_cstatus" class="text-center">
				<span class='msg_bgr msg_bgr_y' *ngIf="game?.accepted === 0">Looking oportunity to Join</span>
				<span class='msg_bgr msg_bgr_y' *ngIf="game?.pc_move_hash === nullHash && game?.ph_move_hash === nullHash">waiting for oponent move...</span>
				<span class='msg_bgr msg_bgr_y' *ngIf="game?.pc_move_hash !== nullHash && game?.ph_move_hash === nullHash">I am waiting your turn to confirm my move...</span>
				<span class='msg_bgr msg_bgr_y' *ngIf="game?.pc_move_hash === nullHash && game?.ph_move_hash !== nullHash">waiting for oponent move...</span>
				<span class='msg_bgr msg_bgr_y' *ngIf="game?.ph_move_hash !== nullHash && game?.pc_move_hash !== nullHash && game?.pc_move === 0">I'll confirm my move asap...</span>
				
				<span class='msg_bgr msg_bgr_y' *ngIf="game?.ph_move_hash !== nullHash && game?.pc_move_hash !== nullHash && game?.pc_move !== 0" [ngClass]="{ 'msg_bgr_g': game?.winner === game?.challenger, 'msg_bgr_r': game?.winner !== game?.challenger && game?.winner !== 'none' && game?.winner !== 'self'}">
					<span *ngIf="game?.pc_move !== game?.pc_move_nonce">
						Move confirmed: <span [innerHtml]="icons[game?.pc_move]"></span>
					</span>
					<span *ngIf="game?.pc_move === game?.pc_move_nonce">
						I was too lazy to confirm a move :)
					</span>
				</span>

			</span>
		</div>
		<i class="fas fa-user-astronaut user-circle-icon"></i>
		<h1 class="winner" id="winnerc_{{host}}" *ngIf="game?.winner !== 'none' && game?.winner === game?.challenger">YOU WINN</h1>
		<h1 class="looser" id="looserc_{{host}}" *ngIf="game?.winner !== 'none' && game?.winner !== game?.challenger && game?.winner !== 'self' ">YOU LOSE</h1>
	</div>
	<div class="col-sm-12">
		<h1  *ngIf="game?.winner === 'none' && game?.pc_move && game?.ph_move">TIE</h1>	
	</div>
</div>

<button class="uk-button uk-button-primary" [ngStyle]="config.style.ukButtonPrimary" type="button" (click)="closeGame()" id="btn_cancel" *ngIf="!tableLoader && game?.pc_move && game?.ph_move">Close Game</button>
<span *ngIf="!tableLoader && game?.pc_move && game?.ph_move" class="btn_restart">or</span>
<button class="uk-button uk-button-primary btn_restart" [ngStyle]="config.style.ukButtonPrimary" type="button" (click)="restart()" id="btn_cancel" *ngIf="!tableLoader && game?.pc_move && game?.ph_move">Restart</button>




